<template>
  <form-item :form-datas = "formDatas" :form-item = "field" :parent-comp-type = "parentCompType"
  >
    <el-slider
        :debounce = "field.preps['debounce']"
        :disabled = "field.preps['disabled']"
        :format-tooltip = "field.preps['formatTooltip']"
        :format-value-text = "field.preps['formatValueText']"
        :height = "field.preps['height']"
        :input-size = "field.preps['inputSize']"
        :label = "field.preps['label']"
        :marks = "field.preps['marks']"
        :max = "field.preps['max']"
        :min = "field.preps['min']"
        :placement = "field.preps['placement']"
        :range = "field.preps['range']"
        :range-end-label = "field.preps['rangeEndLabel']"
        :range-start-label = "field.preps['rangeStartLabel']"
        :show-input = "field.preps['showInput']"
        :show-input-controls = "field.preps['showInputControls']"
        :show-stops = "field.preps['showStops']"
        :show-tooltip = "field.preps['showTooltip']"
        :size = "field.preps['size']"
        :step = "field.preps['step']"
        :tooltip-class = "field.preps['tooltipClass']"
        :validate-event = "field.preps['validateEvent']"
        :vertical = "field.preps['vertical']"
        v-model = "starHorseDynamicForm[field.preps['name']]"
    />

  </form-item>
</template>

<script>
import FormItem from "./form-item";

export default {
  name: "slider-item",
  components: {FormItem},
  props: {
    parentCompType: {type: Object},
    starHorseDynamicForm: {type: Object},
    field: {
      type: Object
    },
    formDatas: {type: Object}
  },
  data() {
    let formItem = {label: "input", required: false};
    return {
      formItem,
      dataField: ""
    }
  },
  methods: {
    selectItem(data) {
      let _this = this;
      _this.$emit("selectItem", data, _this.parentCompType);
    }
  }
}
</script>

<style scoped>

</style>